<template>
    <div>
        <headtop :hotgoods="hotgoods" @homeShow="change"></headtop> 
        <div class="homes" v-if="homeshow">
           <div class="swiper-container banner">
                <div class="swiper-wrapper">
                    <div class="swiper-slide">
                        <img src="static/images/176598235620459583.webp" />
                    </div>      
                    <div class="swiper-slide">
                        <img src="static/images/310897949501872874.webp" />
                    </div>      
                    <div class="swiper-slide">
                        <img src="static/images/132521141880587894.webp" />
                    </div>      
                    <div class="swiper-slide">
                        <img src="static/images/542072390289814055.webp" />
                    </div>      
                    <div class="swiper-slide">
                        <img src="static/images/597567740200913409.webp" />
                    </div>           
                </div>
                <div class="swiper-pagination"></div>
            </div>
            <div class="pintuan">
                    <router-link to="pintuan" v-for="(val,index) in bannerb" :key="index" >
                        <img :src="val.image"  />
                        <p>{{val.title}}</p>
                    </router-link>
            </div>
            <ul class="kaituan">
                <li>
                    <p>超值拼团</p>
                    <router-link to="pintuan">
                        全部拼团
                    </router-link>
                </li>
                <router-link tag="li" v-for="(val,index) in items" :key="index" :to="{path:'commodity',query:{deviceId:val.item_id}}">
                    <div>
                        <img :src="val.image"/>
                    </div> 
                    <div>
                        <p>{{val.title}}</p>
                        <p>￥{{val.discountPrice}} <span>￥{{val.price}}</span></p>
                        <p>2人团·以团{{val.pintuanItemSale}}件</p>
                        <span>去开团</span>
                    </div>
                </router-link>
                <li>
                    <router-link to="pintuan">
                        <p>全部超值拼团</p>
                    </router-link>
                </li>
            </ul>
            <div class="tehui">
                <p>—&nbsp;限时特惠距离活动结束仅剩&nbsp;—</p>
                <p>
                    <span>{{hours}}</span>
                    时
                    <span>{{minutes}}</span>
                    分
                    <span>{{seconds}}</span>
                    秒
                </p>
                <ul>
                    <router-link tag="li" v-for="(val,index) in tehui" :key="index" :to="{path:'commodity',query:{deviceId:val.item_id}}">
                        <div>
                            <img :src="val.image" />
                        </div>
                        <p>￥{{val.discountPrice}} <s>{{val.price}}</s></p>
                        <span>立即抢购</span>
                    </router-link>
                </ul>
            </div>
            <div class="liuxing">
                <img src="static/images/benzhouliuxing.webp" />
                <div>
                    <router-link to="category"></router-link>
                    <router-link to="category"></router-link>
                    <router-link to="category"></router-link>
                    <router-link to="category"></router-link>
                    <router-link to="category"></router-link>
                    <router-link to="category"></router-link>
                    <router-link to="category"></router-link>
                    <router-link to="category"></router-link>
                </div>
            </div>
            <div class="haowu">
                <img src="static/images/haowuhuozu.webp" />
            </div>
            <div class="jingdian" v-for='(val,index) in chenshan' :key="index">
                <img :src="val.image" />
                <div>
                    <router-link tag="a" v-for='(x,num) in val.goodsList' :key="num" :to="{path:'commodity',query:{deviceId:x.signGoodsId}}">
                        <figure>
                            <img :src="x.image" />
                        </figure>
                        <figcaption>
                            <p>{{x.description}}</p>
                            <span>￥{{x.price}}</span>
                        </figcaption>
                    </router-link>
                </div>
            </div>
            <div class="seemore">
                <span>查看更多</span><img src="static/images/rrjiantou.png" />
            </div>
            <div class="mains">
                <ul ref="tops">
                    <li :class="{mains_active:active =='pop'}" @click="changeMain('pop')">流行</li>
                    <li :class="{mains_active:active =='sell'}" @click="changeMain('sell')">热销</li>
                    <li :class="{mains_active:active =='new'}"  @click="changeMain('new')">上新</li>
                </ul>
                <router-link tag="div" v-for='(val,index) in mains' :key="index" :to="{path:'commodity',query:{deviceId:val.iid}}">
                    <img :src="val.show.img" />
                    <p>{{val.title}}</p>
                    <span>{{val.price}}</span>
                    <span>
                        {{val.sale}}
                    </span>
                    <img :src="val.leftbottom_taglist[0]" />
                </router-link>
            </div>
        </div>
        <a href="#" class="tops" v-if="isShow" >
            <img src="static/images/upload_ie4doyjzmvsdsn3dhazdambqgiyde_86x86.png" />
        </a>
    </div>
</template>
<script>
    import {mapActions,mapGetters} from 'vuex';
    import headtop from './header.vue';
    // import {swiper,swiperSlide} from 'vue-awesome-swiper';
    export default{
        computed : {
            hiddes(){
                return this.$store.state.zhanglei_header;
            }
        },
        data(){
            return{
                chenshan : null,
                items : null,
                banner: null,
                bannerb : null,
                isShow : false,
                mains : null,
                hours : 0,
                minutes : 0,
                seconds :0 ,
                miaoshu : 99,
                tehui : null,
                active : "pop",
                hotgoods:null,
                homeshow:true,
                isjiazai : false,
                scrolled : 0,
                num : 0
            }
        },
        created(){
            var d = new Date();
            this.hours = (23-d.getHours())<10 ? "0"+(23-d.getHours()) : (23-d.getHours());
            this.minutes = (59-d.getMinutes())<10 ? "0"+(59-d.getMinutes()) : (59-d.getMinutes());
            this.seconds = (59-d.getSeconds())<10 ? "0"+(59-d.getSeconds()) : (59-d.getSeconds());
        },
        mounted(){
            var swiper = new Swiper('.swiper-container', {
                pagination: '.swiper-pagination',
                paginationClickable: true,
                spaceBetween: 30,
                centeredSlides: true,
                speed : 1000,
                autoplay: 1000,
                loop : true
            });
            window.addEventListener('scroll', this.handleScroll);
            this.$http.jsonp('https://simba-api.meilishuo.com/venus/topic/v2/queryTopicList/h5?',
            {},
            {jsonp:'jsopn1'})
            .then((res)=>{
                this.chenshan = res.body.data;
            });
            this.$http.jsonp("http://mce.mogucdn.com/jsonp/multiget/3",
				{params:{pids:'5868,6348,13730,59540,42287'}},
                {jsonp:"jsonp5868_6348_13730_59540_42287"})
                .then(res=>{
					this.items = res.body.data["59540"].list.slice(0,5);
                    this.bannerb = res.body.data["13730"].list;
                    this.tehui = res.body.data["42287"].list;
                    this.hotgoods=res.body.data["5868"].list;
				});  
            this.$http.jsonp('http://list.meilishuo.com/search?',
                {params:{cKey:'wap-index'}},
                {jsonp:'jsonp3'})
                .then(function(res){
                    this.mains=res.body.data.list;
            })  
        },
        updated(){
            setInterval(this.getTime,1000);
        },
        beforeDestroy() {
             window.removeEventListener('scroll', this.handleScroll);
        },
        components:{
            headtop
        },
        methods:{
            change(msg){
                this.homeshow=msg
            },
            changeMain(a){
                this.active = a;
                this.mains = [];
                this.$http.jsonp('http://list.meilishuo.com/search?',
                    {params:{
                        cKey:'wap-index',
                        sort : a
                        }},
                    {jsonp:'jsonp3'})
                    .then(function(res){
                        this.mains=res.body.data.list;
                })
            },
            getTime(){
                this.miaoshu--;
                if(this.miaoshu<1){
                    this.miaoshu = 99;
                }
                var d = new Date();
                this.hours = (23-d.getHours())<10 ? "0"+(23-d.getHours()) : (23-d.getHours());
                this.minutes = (59-d.getMinutes())<10 ? "0"+(59-d.getMinutes()) : (59-d.getMinutes());
                this.seconds = (59-d.getSeconds())<10 ? "0"+(59-d.getSeconds()) : (59-d.getSeconds());
            },
            handleScroll () {
                this.scrolled = window.scrollY; 
                if(this.scrolled>1300){
                    this.isShow=true;
                }else{
                    this.isShow=false;
                };
                if(this.scrolled>2900){
                    this.$refs.tops.style.position = "fixed";
                    this.$refs.tops.style.top = 0;
                    this.$refs.tops.style.left = 0;
                }else{
                    this.$refs.tops.style.position = null;
                };
                if (this.scrolled>parseInt(document.body.offsetHeight*0.7) &&
                this.scrolled<parseInt(document.body.offsetHeight*0.75)){
                    this.isjiazai = true;
                }else{
                    this.isjiazai=false;
                }
            }
           
        },
         watch : {
            isjiazai(n,o){
                if(this.isjiazai==true){
                    this.num+=1;
                    this.$http.jsonp('http://list.meilishuo.com/search?',
                        {params:{
                            cKey:'wap-index',
                            sort : this.active,
                            page :this.num
                            }},
                        {jsonp:'jsonp3'})
                        .then(function(res){
                            this.mains=Array.concat(this.mains,res.body.data.list);
                    })
                }
            }
        }
    };
    
</script>
<style scoped>
@import "/static/css/swiper.min.css";
    .homes{
        width: 100%;
        display: flex;
        flex-flow: nowrap column;
        background: #eee;
    }
    .tops{
        position: fixed;
        bottom: 3rem;
        right: .5rem;
    }
    .tops img{
        width: 1.7rem;
    }
    .banner {
        width: 100%;
        height: 7.8rem;
        background: #fff;
    }
    .banner img{
        width: 100%;
    }
    .homes .pintuan{
        width: 100%;
        text-align: center;
        background: #fff;
        margin: 0 0 .3rem 0;
        padding: .5rem 0;
        font-size: .56rem;
        color: #666;
        overflow-x: auto;
        display: flex;
        flex-flow: nowrap row;
    }
    .homes .pintuan a{
        color: #666666; 
        display: inline-block;
        width: 3.2rem;
        margin: 0 .375rem;
    }
    .homes .pintuan img{
        width: 3.2rem;
        margin: 0 0 .2rem 0;
    }
    .swiper-container {
        width: 100%;
        height: 100%;
    }
    .homes .kaituan{
        width: 100%;
        background: #fff;
        padding: .4rem;
    }
    .homes .kaituan li{
        width: 100%;
        display: flex;
        flex-flow: nowrap row;
        font-size: .56rem;
        padding: .5rem 0;
        position: relative;
        color: #333;
        border-bottom: 1px solid #ccc;
    }
    .homes .kaituan li div p:first-child{
        font-size: .6rem;
    }
    .homes .kaituan li div p:nth-child(2){
        font-size: .8rem ;
        color: #ff6699;
        margin: .6rem 0 .2rem 0;
    }
   .homes .kaituan li div p:nth-child(2) span{
        font-size: .4rem;
        color: #333;
        text-decoration: line-through;
    }
    .homes .kaituan li div p:nth-child(3){
        color: #333;
        font-size: .4rem;
    }
    .homes .kaituan li div>span{
        position: absolute;
        right: 0;
        bottom: .5rem;  
        display: inline-block;
        width: 3.6rem;
        height: 1.2rem;
        line-height: 1.2rem;
        text-align: center;
        background: #ff6699;
        color: #fff;
        border-radius: .7rem;
        font-size: .6rem;
    }
    .homes .kaituan li:first-child{
        display: flex;
        justify-content: space-between;
        border-bottom: none;
    }
    .homes .kaituan li:first-child a{
        color: #666;
        background: url(/static/images/170706_7d6f70iaill2c55je7h09225ida77_21x33.png) no-repeat right center;
        padding: 0 .56rem 0 0;
        background-size: 10%;
    }
    .homes .kaituan li:last-child{
        width: 100%;
        margin: .6rem 0 0 0;
        display: flex;
        justify-content: center;
        align-items: center;
        border-bottom: none;
    }
    .homes .kaituan li:last-child p{
        width: 9.2rem;
        background: #ff6699;
        text-align: center;
        color: #fff;
        padding: .3rem 0;
        border-radius: .7rem;
        font-size: .6rem;
    }
    .homes .kaituan li div:last-child{
        width: 70%;
    }
    .homes .kaituan li div:first-child{
        width: 30%;
        height: 4.3rem;
        overflow: hidden;
        margin: 0 .5rem 0 0;
    }
    .homes .kaituan li img{
        display: block;
        width:100%;
    }
    .homes .tehui {
        width: 100%;
        background: #fff;
        padding: .5rem .3rem;
        margin: .3rem 0 .4rem 0 ;
        display: flex;
        flex-flow: nowrap column;
        align-items: center;
        font-size: .6rem;
    }
    .homes .tehui>p:nth-child(2){
        font-size: .55rem;
        margin: .56rem 0;
    }
    .homes .tehui>p:nth-child(2) span{
        display: inline-block;
        width: .85rem;
        height: .65rem;
        line-height: .65rem;
        background : #000;
        text-align: center;
        color: #fff;
        margin: 1px;
        font-size: .65rem;
    }
    .homes .tehui ul {
        display: flex;
        width: 100%;
        flex-flow: nowrap row;
        overflow-x: auto;
    }
    .homes .tehui ul li{
        width: 4rem;
        margin: 0 .3rem 0 0;
        font-size: .56rem;
        text-align: center;
    }
    .homes .tehui ul li p:nth-child(2){
        display: flex;
        justify-content: space-between;
        align-items: flex-end;
        color: #ff6699;
        margin: .2rem 0;
        font-size: .6rem;
    }
    .homes .tehui ul li p:nth-child(2) s{
        color: #ccc;    
        font-size: .36rem;
    }
    .homes .tehui ul li span:nth-child(3){
        display: inline-block;
        color: #fff;
        background: #d0011b;
        padding: .1rem .4rem ;
        border-radius: .5rem;
        font-size: .5rem;
    }
    .homes .tehui ul li div{
        width: 4rem;
        height: 5.6rem;
        overflow: hidden;
    }
    .homes .tehui ul li img{
        width: 100%;
        display: block;
    }
    .homes .liuxing {
        width: 100%;
        height: 11.5rem;
        position: relative;
    }
    .homes .liuxing div{
        width: 100%;
        height: 9.6rem;
        position: absolute;
        bottom: 0;
        display: flex;
        flex-flow: wrap row;
        justify-content: space-around;
        z-index: 10;
    }
    .homes .liuxing div a{
        flex-basis: 24%;
    }
    .homes .liuxing img{
        width: 100%;
        display: block;
    }
    .haowu img{
        width: 100%;
        display: block;
    }
    .homes .jingdian{
        width: 100%;
        display: flex;
        flex-flow: nowrap column;
        background: #fff;
        margin: 0 0 .4rem 0;
    }
    .jingdian>img{
        width: 100%;
    }
    .jingdian div{
        width: 100%;
        font-size: .5rem;
        display: flex;
        flex-flow: nowrap row;
        overflow-x: auto;
        color: #444;
    }
    .jingdian div a{
        width: 4.3rem;
        height: 6.24rem;
        margin: .4rem 0 .4rem .4rem;
    }
    .jingdian div a figure{
        width: 100%;
        height: 4.8rem;
        overflow: hidden;
    }
     .jingdian div a p{
         overflow: hidden;
         text-overflow: ellipsis;
         white-space: nowrap;
         margin : .1rem 0;
         color: #666;
     }
     .jingdian div a span{
         color: #f14a6b;
     }
    .jingdian div a img{
        display: block;
        width: 100%;
    }
     .mains {
        width: 100%;
        background: #fff;
        display: flex;
        flex-flow: wrap row;
        margin: .3rem 0 2.6rem 0;
        padding: 0 .2rem;
        justify-content: space-between;
    }
    .mains ul{
        width: 100%;
        display: flex;
        flex-flow: nowrap row;
        justify-content: space-around;
        height: 1.7rem;
        line-height: 1.7rem;
        font-size: .7rem;
        margin: 0 0 .2rem 0;
        background: #fff;
        z-index: 10;
    }
    .mains div{
        width: 49%;
        text-align: center;
        font-size: .6rem;
        margin: 0 0 .5rem 0;
        position: relative;
    }
    .mains div p{
         overflow: hidden;
         text-overflow: ellipsis;
         white-space: nowrap;
    }
    .mains div p:nth-child(2){
        color: #666;
        font-size: .44rem;
    }
    .mains div span{
        display: inline-block;
        color: #ff3366;
        font-size:.52rem;
    }
    .mains div span:nth-child(4){
        padding: 0 0 0 .8rem;
        color: #999999;
        background: url(/static/images/emysc91ks2izlw6qd3gw602knzc2s2l7.png) no-repeat left center;
        background-size: .56rem;
        margin: 0 0 0 .4rem;
    }
    .mains div img{
        width: 100%;
        height: 10.77rem;
    }
    .mains div img:last-child{
        width: 1.4rem;
        height: .65rem;
        position: absolute;
        left: .2rem;
        bottom: 1.65rem;
    }
    .mains_active{
        color: #ff6699;
        border-bottom: 2px solid;
    }
    .seemore{
        width: 100%;
        height: 2rem;
        line-height: 2rem;
        text-align: center;
        color: #f14a6b;
        font-size: .7rem;
        background: #ffffff;
        margin: -.33rem 0 0 0;
    }
    .seemore span{
        margin: 0 .4rem 0 0;
    }
    .seemore img{
        margin: 0 0 0 -.35rem;
    }
    .swiper-container {
        width: 100%;
        height: 100%;
        
    }
    .swiper-slide {
        text-align: center;
        font-size: 18px;
        background: #fff;
        
        /* Center slide text vertically */
        display: -webkit-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        -webkit-justify-content: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        -webkit-align-items: center;
        align-items: center;
    }
    ::-webkit-scrollbar{
        display: none;
    }
</style>